<template>
    <div class="bo">
        <div ref="container" class="code-container"></div>
        <el-row>
            <el-button type="primary" @click="save()">保存</el-button>
            <el-button>取消</el-button>
        </el-row>
    </div>
</template>
<script>
import * as monaco from 'monaco-editor'
import { read_debugtalk } from '../../api/api'
import { edit_debugtalk } from '../../api/api'
export default {
    created() {
            this.getData();
        },
    methods: {
        getData(){
            read_debugtalk(this.$route.query.id)
                .then(response => {
                    this.monacoEditor.setValue(response.data.debugtalk)
                })
        },
        save(){
            edit_debugtalk(this.$route.query.id, {debugtalk:this.monacoEditor.getValue()})
                .then(response => {
                    this.$message.success('Debugtalk修改成功');
                    this.$router.push({
                        path: '/DebugtalkList',
                    })
                })
                .catch(error =>{
                    this.$message.error('Debugtalk修改失败');
                })
        }
    },
    props: {
        // 编辑器中呈现的内容
        codes: {
            type: String,
            default: function () {
                return ''
            }
        },
        readOnly: {
            type: Boolean,
            default: function () {
                return false
            }
        },
        // 主要配置
        editorOptions: {
            type: Object,
            default: function () {
                return {
                    selectOnLineNumbers: true,
                    roundedSelection: false,
                    readOnly: this.readOnly, // 只读
                    cursorStyle: 'line', // 光标样式
                    automaticLayout: false, // 自动布局
                    glyphMargin: true, // 字形边缘
                    useTabStops: false,
                    fontSize: 28, // 字体大小
                    autoIndent: false // 自动布局
                }
            }
        }
    },
    mounted () {
        this.monacoEditor = monaco.editor.create(this.$refs.container, {
            value: this.codes,
            language: 'python',
            theme: 'vs-dark', 
            editorOptions: this.editorOptions // 同codes
        }),
        this.monacoEditor.onDidChangeModelContent((event) => {
            let changeContent = this.monacoEditor.getValue()
            this.$emit('update:contentBody', changeContent)
        })
    }

}
</script>

<style>
.bo{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid #eaeaea;
}
.code-container{
    width: 100%;
    height: 95%;
    overflow: hidden;
    border: 1px solid #eaeaea;
}
</style>
